<!doctype html>
<html>
	<head>
		<title>标题</title>
		<meta charset="utf-8">
		<!-- 引入 CSS 文件 -->
		<link rel="stylesheet" href="jd_index.css">
	</head>
	<body>
		<!-- 页面顶部:top : 100% -->
		<header id="top">
		  <!-- 内容显示区域：1211px -->
			<div id="top_box">
				<!-- 图片 -->
				<img src="Images/star.jpg" >
				<!-- 收藏京东 -->
				<a class="lf" href="#">收藏京东</a>
				<!-- 菜单列表 -->
				<ul class="rt">
					<li>
						您好，欢迎来到京东!
						<a href="#">[登录]</a>
						<a href="#">[免费注册]</a>
					</li>
					<li>
						<b></b><!-- 边框 -->
						<a href="#">我的订单</a>
					</li>
					<li class="vip">
						<b></b><!-- 边框 -->
						<a href="#">会员俱乐部</a>
					</li>
					<li class="dakehu">
						<b></b><!-- 边框 -->
						<a href="#">企业频道</a>
					</li>
					<li class="app_jd">
						<b></b><!-- 边框 -->
						<a href="#">手机京东</a>
					</li>
					<li class="service">
						<b></b><!-- 边框 -->
						<a href="#">客户服务</a>
						<!-- 弹出菜单 -->
						<ul>
							<li>
								<a href="#">帮助中心</a>
							</li>
							<li>
								<a href="#">售后服务</a>
							</li>
							<li>
								<a href="#">在线客服</a>
							</li>
							<li>
								<a href="#">投诉中心</a>
							</li>
							<li>
								<a href="#">客服邮箱</a>
							</li>
						</ul>
					</li>
					<li>
						<b></b><!-- 边框 -->
						<a href="#">网站导航</a>
					</li>
				</ul>
			</div>
		</header>
		<!-- LOGO和搜索框:top_main -->
		<div id="top_main">
			<!-- LOGO -->
			<a href="#" class="lf">
				<img src="Images/logo-201305.png">
			</a>
			<!-- 搜索框 -->
			<div id="search_box" class="lf">
				<!-- 搜索框 -->
				<div class="search">
					<input id="txtSearch" />
					<button>搜索</button>
				</div>
				<!-- 热门搜索 -->
				<div class="hot_words">
					<span>热门搜索：</span>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
					<a href="#">家纺11月大促</a>
				</div>
			</div>
			<!-- 我的京东 -->
			<div id="my_jd">
				我的京东
				<b></b>
			</div>
			<!-- 去购物车结算 -->
		</div>
		<!-- 主导航:nav  -->
		<nav id="nav">
			<!-- 全部商品分类 -->
			<p>
				<a href="#">全部商品分类</a>
				<b></b>
			</p>
			<!-- 导航列表 -->
			<ul class="lf">
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">服装城</a>
				</li>
				<li>
					<a href="#">食品</a>
				</li>
				<li>
					<a href="#">团购</a>
				</li>
			</ul>
		</nav>
		<!-- banner部分：banner  -->
		<div id="banner">
			<!-- 分类 -->
			<ul id="cate_box">
				<li>
					<h3>
						<a href="#">图书、音像，数字商品</a>
					</h3>
					<!-- 弹出框 -->
					<div id="sub_cate_box">
						<!-- 子分类内容 -->
						<div class="sub_cate_items">
							<ul>
								<li class="title">
									<a href="#">电子书</a>
								</li>
								<li>
									<a href="#">免费</a>
								</li>
								<li>
									<a href="#">小说</a>
								</li>
								<li>
									<a href="#">励志与成功</a>
								</li>
								<li>
									<a href="#">婚恋/两性</a>
								</li>
								<li>
									<a href="#">文学</a>
								</li>
								<li>
									<a href="#">经营</a>
								</li>
							</ul>
							<ul>
								<li class="title">
									<a href="#">数字音乐</a>
								</li>
								<li>
									<a href="#">免费</a>
								</li>
								<li>
									<a href="#">小说</a>
								</li>
								<li>
									<a href="#">励志与成功</a>
								</li>
								<li>
									<a href="#">婚恋/两性</a>
								</li>
								<li>
									<a href="#">文学</a>
								</li>
								<li>
									<a href="#">经营</a>
								</li>
							</ul>
						</div>
						<!-- 小 banner -->
						<div class="sub_cate_banner">
							<div>
								<img src="Images/cate_banner_01.jpg">
							</div>
							<div>
								<img src="Images/cate_banner_02.jpg">
							</div>
							<h4>推荐品牌出版商/书店</h4>
							<ul>
								<li>
									<a href="#">中华书局</a>
								</li>
								<li>
									<a href="#">人民邮电出版社</a>
								</li>
								<li>
									<a href="#">上海世纪出版股份有限公司</a>
								</li>
								<li>
									<a href="#">电子工业出版社</a>
								</li>
								<li>
									<a href="#">浙江少年儿童出版社</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li>
					<h3>
						<a href="#">家用电器</a>
					</h3>
				</li>
			</ul>
			<!-- banner -->
			<div id="slider_box">
				<!-- 滚动的图片广告 -->
				<div id="slider">
					<img src="Images/index/banner_02.jpg">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ul>
				</div>
				<!-- 图片广告-->
				<div class="ad">
					<a href="#" class="preview"></a>
					<ul class="lf">
						<li>
							<a href="#">
								<img src="Images/index/ad_01.jpg">
							</a>
						</li>
						<li class="mid">
							<a href="#">
								<img src="Images/index/ad_02.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/ad_03.jpg">
							</a>
						</li>
					</ul>
					<a href="#" class="next"></a>
				</div>
			</div>
			<!-- 右侧其他内容 -->
			<div id="focus_extra">
				<!-- 图像 -->
				<div class="ad_img">
					<a href="#">
						<img src="Images/index/ad_focus.jpg">
					</a>
				</div>
				<!-- 京东快报 -->
				<div id="news">
					<!-- 标题 -->
					<div class="title">
						<b class="lf">京东快报</b>
						<a href="#">更多快报 &gt;</a>
					</div>
					<!-- 内容 -->
					<div class="content">
						<ul class="lf">
							<li>
								<a href="#">松鼠好年货2折开抢</a>
							</li>
							<li>
								<a href="#">松鼠好年货2折开抢</a>
							</li>
							<li>
								<a href="#">松鼠好年货2折开抢</a>
							</li>
							<li>
								<a href="#">松鼠好年货2折开抢</a>
							</li>
						</ul>
						<ul class="rt">
							<li>
								<a href="#">松鼠好年货2折开抢</a>
							</li>
							<li>
								<a href="#">松鼠好年货2折开抢</a>
							</li>
							<li>
								<a href="#">松鼠好年货2折开抢</a>
							</li>
							<li>
								<a href="#">松鼠好年货2折开抢</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 虚拟相关 -->
				<div id="virtuals">
					<ul>
						<li class="huafei">
							<a href="#">
								<b></b>
								话费
								<i></i>
							</a>
						</li>
						<li class="jipiao">
							<a href="#">
								<b></b>
								机票
								<i></i>
							</a>
						</li>
						<li class="huafei">
							<a href="#">
								<b></b>
								话费
								<i></i>
							</a>
						</li>
						<li class="huafei">
							<a href="#">
								<b></b>
								话费
								<i></i>
							</a>
						</li>
						<li class="huafei">
							<a href="#">
								<b></b>
								话费
							</a>
						</li>
						<li class="huafei">
							<a href="#">
								<b></b>
								话费
							</a>
						</li>
						<li class="huafei">
							<a href="#">
								<b></b>
								话费
							</a>
						</li>
						<li class="huafei">
							<a href="#">
								<b></b>
								话费
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 撑起banner元素的高度 -->
			<div class="clear"></div>
		</div>
		<!-- 主体内容:main -->
		<section id="main">
			<!-- 生活的橱窗 -->
			<div id="show_box">
				<p>
					生活的橱窗
					<i>每一天展示精彩</i>
				</p>
				<ul>
					<li class="pinpaijie"><!-- 相对定位 -->
						<!-- 遮罩层 -->
						<b></b>
						<!-- 文本 -->
						<div><!-- 绝对定位 -->
							<h3>品牌街</h3>
							<h4>三星note</h4>
							<h5>赠500京东E卡</h5>
							<ul>
								<li>
									<i></i>
									<a href="#">更多品牌</a>
								</li>
								<li>
									<i></i>
									<a href="#">进入品牌街</a>
								</li>
							</ul>
						</div>
					</li>
					<li class="pinpaijie">
						<!-- 遮罩层 -->
						<b></b>
						<div><!-- 绝对定位 -->
							<h3>天天低价</h3>
							<h4>坚果礼盒</h4>
							<span>95.8元秒杀</span>
						</div>
					</li>
					<li class="pinpaijie">
						<!-- 遮罩层 -->
						<b></b>
						<!-- 文本 -->
					</li>
					<li class="pinpaijie">
						<!-- 遮罩层 -->
						<b></b>
						<!-- 文本 -->
					</li>
					<li class="pinpaijie">
						<!-- 遮罩层 -->
						<b></b>
						<!-- 文本 -->
						<div>
							<h3>今日团购</h3>
							<h4>100元代金券</h4>
							<div>
								<span>团购价</span>
								<b>￥89</b>
								<p>
									<img src="Images/index/cantuan.png">
								</p>
							</div>
						</div>
					</li>
					<li class="pinpaijie">
						<!-- 遮罩层 -->
						<b></b>
						<!-- 文本 -->
					</li>
					<li class="pinpaijie">
						<!-- 遮罩层 -->
						<b></b>
						<!-- 文本 -->
					</li>
					<li class="pinpaijie">
						<!-- 遮罩层 -->
						<b></b>
						<!-- 文本 -->
					</li>
				</ul>
			</div>
			<!-- 1F 家电通讯 -->
			<div class="floor">
				<!-- 头部标签 -->
				<header>
					<!-- 1f -->
					<span>1F</span>
					<!-- 家电通讯 -->
					<p>家电通讯</p>
				  <!-- 大家电 -->
					<ul class="lf tab">
						<li>
							<a href="#">特价商品</a>
						</li>
						<li>
							<a href="#">大家电</a>
						</li>
						<li>
							<a href="#">小家电</a>
						</li>
						<li>
							<a href="#">手机通讯</a>
						</li>
						<li>
							<a href="#">汽车五金</a>
						</li>
					</ul>
					<!-- 合约计划说明 -->
					<ul class="lf link">
						<li>
							<a href="#">合约计划说明</a>
						</li>
						<li>
							<a href="#">大家电配送</a>
						</li>
					</ul>
				</header>
				<!-- 主体内容 -->
				<!-- 左侧内容 -->
				<div class="left_list">
					<!-- 列表 -->
					<ul>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
						<li><a href="#">手机</a></li>
					</ul>
					<!-- 图像 -->
					<p>
						<img src="Images/index/fl_01.jpg">
					</p>
				</div>
				<!-- 中间内容 -->
				<div class="middle_list">
					<dl>
						<dt>
							<img src="Images/index/fl_dl_01.jpg">
						</dt>
						<dd>
							<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
						</dd>
						<dd class="text">
							送澳门风云2电影票
						</dd>
					</dl>
					<!-- 乐檬K3 -->
					<div>
						<img src="Images/index/fl_ad_01.jpg">
					</div>
					<dl>
						<dt>
							<img src="Images/index/fl_dl_01.jpg">
						</dt>
						<dd>
							<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
						</dd>
						<dd class="text">
							送澳门风云2电影票
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="Images/index/fl_dl_01.jpg">
						</dt>
						<dd>
							<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
						</dd>
						<dd class="text">
							送澳门风云2电影票
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="Images/index/fl_dl_01.jpg">
						</dt>
						<dd>
							<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
						</dd>
						<dd class="text">
							送澳门风云2电影票
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="Images/index/fl_dl_01.jpg">
						</dt>
						<dd>
							<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
						</dd>
						<dd class="text">
							送澳门风云2电影票
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="Images/index/fl_dl_01.jpg">
						</dt>
						<dd>
							<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
						</dd>
						<dd class="text">
							送澳门风云2电影票
						</dd>
					</dl>
					<dl>
						<dt>
							<img src="Images/index/fl_dl_01.jpg">
						</dt>
						<dd>
							<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
						</dd>
						<dd class="text">
							送澳门风云2电影票
						</dd>
					</dl>
				</div>
				<!-- 右侧内容 -->
				<div class="right_list">
					<ul>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
						<li>
							<a href="#">
								<img src="Images/index/537b316bN35574fff.jpg">
							</a>
						</li>
					</ul>
					<p>
						<img src="Images/index/fl_ad_02.jpg" />
					</p>
				</div>
			</div>
			<!-- 热门晒单 -->
		</section>
		<!-- 页面底部-配送方式:foot_box -->
		<footer id="foot_box">
			<!-- 购物指南 -->
			<p class="shopping_guide"></p>
			<ul>
				<li><b>购物指南</b></li>
				<li>
					<a href="#">购物流程</a>
				</li>
				<li>
					<a href="#">会员介绍</a>
				</li>
				<li>
					<a href="#">大家电</a>
				</li>
				<li>
					<a href="#">团购/机票</a>
				</li>
				<li>
					<a href="#">常见问题</a>
				</li>
				<li>
					<a href="#">联系客服</a>
				</li>
			</ul>
			<!-- 购物指南 -->
			<p class="shopping_guide"></p>
			<ul>
				<li><b>购物指南</b></li>
				<li>
					<a href="#">购物流程</a>
				</li>
				<li>
					<a href="#">会员介绍</a>
				</li>
				<li>
					<a href="#">大家电</a>
				</li>
				<li>
					<a href="#">团购/机票</a>
				</li>
				<li>
					<a href="#">常见问题</a>
				</li>
				<li>
					<a href="#">联系客服</a>
				</li>
			</ul>
			<!-- 配送方式 -->
			<p class="send_type"></p>
			<ul>
				<li><b>配送方式</b></li>
				<li>
					<a href="#">购物流程</a>
				</li>
				<li>
					<a href="#">会员介绍</a>
				</li>
				<li>
					<a href="#">大家电</a>
				</li>
				<li>
					<a href="#">团购/机票</a>
				</li>
				<li>
					<a href="#">常见问题</a>
				</li>
				<li>
					<a href="#">联系客服</a>
				</li>
			</ul>
			<!-- 购物指南 -->
			<p class="shopping_guide"></p>
			<ul>
				<li><b>购物指南</b></li>
				<li>
					<a href="#">购物流程</a>
				</li>
				<li>
					<a href="#">会员介绍</a>
				</li>
				<li>
					<a href="#">大家电</a>
				</li>
				<li>
					<a href="#">团购/机票</a>
				</li>
				<li>
					<a href="#">常见问题</a>
				</li>
				<li>
					<a href="#">联系客服</a>
				</li>
			</ul>
			<!-- 购物指南 -->
			<p class="shopping_guide"></p>
			<ul>
				<li><b>购物指南</b></li>
				<li>
					<a href="#">购物流程</a>
				</li>
				<li>
					<a href="#">会员介绍</a>
				</li>
				<li>
					<a href="#">大家电</a>
				</li>
				<li>
					<a href="#">团购/机票</a>
				</li>
				<li>
					<a href="#">常见问题</a>
				</li>
				<li>
					<a href="#">联系客服</a>
				</li>
			</ul>
		</footer>
		<!-- 页面底部-备案号:footer -->
		<footer id="footer">
			<!-- 关于我们 -->
			<div class="links">
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>|
				<a href="#">关于我们</a>
			</div>
			<!-- 备案号等 -->
			<div class="text">
				北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-非经营性-2011-0034<br>
				音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号<br>
				网络文化经营许可证京网文[2011]0168-061号 Copyright © 2004-2014 京东JD.com 版权所有<br>
				京东旗下网站： English Site 拍拍网 网银在线<br>
			</div>
			<!-- 授权信息 -->
			<div class="imgs">
				<img src="Images/cx.jpg">
				<img src="Images/cy.jpg">
				<img src="Images/kx.jpg">
				<img src="Images/jy.jpg">
			</div>
		</footer>
	</body>
</html>